<template>
  <el-dialog title="报警条件" :visible="visible" append-to-body @close="handleClose">
    <div class="container">
      <div class="alarm-block">
        <div class="alarm-item">
          <div class="alarm-item-type">
            默认预警条件
          </div>
          <div class="alarm-item-list">
            <div class="alarm-item-list-childitem">
              <div class="level-name" />
              <div class="app-el-form-item" @click="()=> {handleSelectAddOpen('default')}">
                {{ conditionDesc }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="businessLevel < 3" class="alarm-item">
          <div class="alarm-item-type">
            下级指标
          </div>
          <div class="alarm-item-list">
            <template v-for="(chlidrenAlarmItem, index) in childAreaList">
              <div :key="index" class="alarm-item-list-childitem">
                <div class="level-name">
                  {{ chlidrenAlarmItem.deptName }}
                </div>
                <div class="app-el-form-item" @click="() => {handleSelectAddOpen('children',index)}">
                  {{ chlidrenAlarmItem.conditionDesc }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <AlarmConditSelectAddView ref="AlarmConditSelectAddRef" />
    <div slot="footer">
      <el-button size="mini" @click="handleClose">
        取消
      </el-button>
      <el-button size="mini" type="primary" @click="handleOk">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import AlarmConditSelectAddView from './selectViewAdd'
import { alarmConditOperatorMap } from '@/config/dict'
import { fetchDropLowerLevelDept } from '@/api/commonDropDown'
export default {
  name: 'AlarmConditSelectView',
  components: { AlarmConditSelectAddView },
  data() {
    return {
      visible: false,
      conditionDesc: '',
      conditionType: null,
      warningConditionParam: [],
      warningLevelChildParamList: [],
      childAreaList: [] // 下级指标区域
    }
  },
  computed: {
    kpiOptionList: function() {
      const { businessFormData } = this.$store.state

      return businessFormData.basicForm.data.businessKpiParams || []
    },
    businessLevel: function() {
      return this.$store.state.businessFormData.basicForm.data.businessLevel
    }
  },

  methods: {
    open(propsData) {
      this.$data.visible = true

      this.$data.warningConditionParam = propsData.warningConditionParam // 默认预警条件
      this.$data.conditionDesc = propsData.conditionDesc // 默认预警 说明
      this.$data.conditionType = propsData.conditionType // 默认预警 类型

      this.$data.warningLevelChildParamList = propsData.warningLevelChildParamList || [] // 下级指标预警条件 集合

      this.businessLevel < 3 && this.postChlidAreaList() // 业务级别为3时没有下级指标 (1=总部级 2=区域级 3=项目级)
    },

    // 创建 备注
    formatConditionToDesc(res) {
      const conditionTxt = res.conditionType === 1 ? '并且' : '或者'

      return res.warningConditionParamList
        .map(e => {
          const kepTxt = this.kpiOptionList.find(ee => ee.id === e.kpiId).name
          const operatorTxt = alarmConditOperatorMap.find(ee => ee.key === e.operator).value
          return kepTxt + ' ' + operatorTxt + ' ' + e.value
        })
        .join(conditionTxt)
    },

    // 获取下级指标区域
    postChlidAreaList() {
      const params = {
        businessLevel: this.businessLevel,
        kpiNameList: this.kpiOptionList.map(e => e.name)
      }
      fetchDropLowerLevelDept(params).then(res => {
        const childAreaList = res.map(e => {
          const current = this.$data.warningLevelChildParamList.find(ee => ee.deptId === e.deptId)
          if (current) {
            return { ...e, ...current }
          }
          return { ...e, clean: true }
        })
        this.$set(this.$data, 'childAreaList', childAreaList)
      })
    },
    handleClose() {
      this.$data.visible = false
    },
    handleOk() {
      this.handleClose()
      this.$emit('submit', {
        ...this.$data,
        warningLevelChildParamList: this.$data.childAreaList.filter(e => !e.clean)
      })
    },
    handleSelectAddOpen(type, index) {
      let options = {}

      if (type === 'children') {
        if (!this.$data.warningConditionParam || this.$data.warningConditionParam.length === 0) {
          this.$message({ type: 'warning', message: '请先配置默认预警条件' })
          return
        }
        const currentChlidren = this.$data.childAreaList[index]
        options = {
          parentIdType: 2,
          ...currentChlidren,
          parentOption: {
            conditionDesc: this.$data.conditionDesc,
            conditionType: this.$data.conditionType,
            warningConditionParamList: this.$data.warningConditionParam
          }
        }
        this.$refs.AlarmConditSelectAddRef.open(options).then(res => {
          const current = this.$data.childAreaList[index]
          const nowValue = {
            ...current,
            conditionDesc: this.formatConditionToDesc(res),
            conditionType: res.conditionType,
            warningConditionParamList: res.warningConditionParamList,
            clean: false
          }
          this.$set(this.$data.childAreaList, index, nowValue)
        })
      } else {
        options.parentIdType = 1
        options.conditionDesc = this.$data.conditionDesc
        options.conditionType = this.$data.conditionType
        options.warningConditionParamList = this.$data.warningConditionParam
        this.$refs.AlarmConditSelectAddRef.open(options).then(res => {
          this.$data.conditionType = res.conditionType
          this.$data.conditionDesc = this.formatConditionToDesc(res)
          this.$data.warningConditionParam = res.warningConditionParamList
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .alarm-item-list-childitem {
    display: flex;

    .level-name {
      width: 70px;
      padding-left: 12px;
    }
    .app-el-form-item {
      flex: 1;
      min-height: 28px;
    }
  }
</style>
